<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <link rel="stylesheet" href="/css/login.css">
    <!-- 作者QQ:951252660 -->
</head>

<body>
<form action="{:url('login')}" method="post" id="commentForm" >
    <div class="login">
        <div class="center" style="text-align: center">
            <h1>后台管理系统</h1>
            <div class="inputLi">
                <strong>账户</strong>
                <input type="text" name="username" placeholder="请输入用户名">
            </div>
            <div class="inputLi">
                <strong>密码</strong>
                <input type="password" name="password" placeholder="请输入密码">
            </div>
            <div class="inputLi">
                <strong>验证码</strong>
                <input type="text" name="captcha" placeholder="请输入验证码">
                <img src="{:captcha_src()}" alt="captcha" id="captcha"/>
            </div>
            <div class="inputLi">
                <button type="submit" id="sub">登录</button>
            </div>

        </div>
    </div>
</form>

</body>

</html>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
    $(function () {
        $("#captcha").click(function () {
                let src=$(this).attr('src')+'?vt='+Math.random();
                $(this).attr('src',src);
        })
        $().ready(function () {
            $("#commentForm").validate({
                rules: {
                    username: {
                        required: true,
                    },
                    password: {
                        required: true,
                    },
                    captcha: {
                        required: true,

                    }
                },
                messages:{
                    username: {
                        required:"请输入用户名",
                    },
                    password:{
                        required:"请输入密码",
                    },
                    captcha: {
                        required:"验证码不能为空",
                    }

                }
            });
        });
    })

</script>